* {
  margin: 0;
  padding: 0; }

li {
  list-style: none; }

html, body {
  width: 100%;
  height: 100%; }

.container {
  height: 100%; }
  .container .swiper-container {
    width: 100%;
    height: 70%;
    position: relative; }
    .container .swiper-container .swiper-wrapper {
      height: 100%;
      overflow: hidden; }
      .container .swiper-container .swiper-wrapper .imglist {
        width: 4200px;
        height: 100%;
        display: flex;
        transition-duration: 400ms; }
        .container .swiper-container .swiper-wrapper .imglist li {
          width: 409px;
          height: 100%;
          flex-shrink: 0; }
          .container .swiper-container .swiper-wrapper .imglist li img {
            width: 100%;
            height: 100%; }
    .container .swiper-container .prev, .container .swiper-container .next {
      width: 27px;
      height: 44px;
      cursor: pointer;
      position: absolute;
      top: 50%;
      user-select: none; }
    .container .swiper-container .prev {
      left: 8px; }
    .container .swiper-container .next {
      right: 8px; }
  .container .swiper-thumbs {
    width: 100%;
    height: 20%;
    background: #000;
    overflow: auto; }
    .container .swiper-thumbs::-webkit-scrollbar {
      display: none; }
    .container .swiper-thumbs .imglist {
      height: 100%;
      width: 600px;
      display: flex; }
      .container .swiper-thumbs .imglist li {
        width: 100px;
        border-collapse: collapse;
        border: 5px solid #000;
        margin: 5px 2px;
        opacity: 0.4;
        float: left; }
        .container .swiper-thumbs .imglist li img {
          display: block;
          width: 100%;
          height: 100%; }

@font-face {
  font-family: 'iconfont';
  src: url("./fonts/iconfont.ttf") format("woff"), url("./fonts/iconfont.woff") format("truetype"); }

.iconfont {
  font-family: "iconfont" !important;
  font-size: 30px;
  color: #fff;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }
